
const{createApp} = Vue;
createApp({
  data() {
    return {
      herolist:[],
      query:{
        key:'zonghe',
        value:0
      },
      keyword:'',
      typelist:{
        zonghe:[
          {name:'本周免费',value:10},
          {name:'新手推荐',value:11}
        ],
        dingwei:[
          {name:'全部',value:0},
          {name:'坦克',value:3},
          {name:'战士',value:1},
          {name:'法师',value:2},
          {name:'刺客',value:4},
          {name:'射手',value:5},
          {name:'辅助',value:6},
        ]
      }
    }
  },
  computed:{
    filterHeross(){
      const {key,value} = this.query;
      const keyword = this.keyword;
      if(keyword){
        const res= this.herolist.filter(item => {
          return item.cname.includes(keyword)
        })
       const res1 =_.cloneDeep(res)
       return res1.map(item => {
        item.cname=item.cname.replace(keyword,`<span style="color:red">${keyword}</span>`)
        return item
       })
      
      }
      else{
        if(key==='dingwei'){
        if(value===0){
          return this.herolist
        }else{
        return this.herolist.filter(item => item.hero_type===value||item.hero_type2===value)
      }
    }else if(key==='zonghe')
      return this.herolist.filter(item => item.pay_type===value)
      }
      
    },
  },
  methods: {
    async getHerolist() {
      const {data} = await axios.get('http://project.x-zd.net:3001/apis/herolist');
      this.herolist = data.data;
    },
    changeType(type,value){
      this.query.key = type;
      this.query.value = value;
      this.keyword = ''
    },
    changeKeyword(e){
      this.keyword=e.target.value;
      this.query.key = 'dingwei';
      this.query.value = 0
    }
    },
   mounted(){
    this.getHerolist();
  }
  }).mount('#app');